<template>
  <div class="edit">
    <el-steps :space="200" :active="active" simple class="edit-top">
      <el-step title="试卷选择"
        ><template #icon><span class="iconfont icon-classify"></span></template
      ></el-step>
      <el-step title="试卷配置"
        ><template #icon><span class="iconfont icon-shiti"></span></template
      ></el-step>
      <el-step title="考试配置"
        ><template #icon><span class="iconfont icon-setting"></span></template
      ></el-step>
      <el-step title="用户选择"
        ><template #icon><span class="iconfont icon-persons"></span></template
      ></el-step>
      <el-step title="考试发布"
        ><template #icon><span class="iconfont icon-publish"></span></template
      ></el-step>
    </el-steps>
    <PaperSelect
      v-if="active === 0"
      @select="(type) => paperSelect(type)"
    ></PaperSelect>
    <Paper
      ref="paper"
      v-if="active === 1 && form.genType === 1"
      :show="paperShow"
      @paperShowUpdate="(show) => (paperShow = show)"
    ></Paper>
    <PaperRule
      ref="paperRule"
      v-if="active === 1 && form.genType === 2"
    ></PaperRule>
    <ExamSetting ref="examSetting" v-if="active === 2"></ExamSetting>
    <ExamUser ref="examUser" v-if="active === 3"></ExamUser>
    <ExamPublish v-if="active === 4"></ExamPublish>
    <div class="edit-bottom">
      <div v-if="progressBar.percent > 0" class="edit-bottom-percent">
        <el-progress :percentage="progressBar.percent">{{
          progressBar.msg
        }}</el-progress>
      </div>
      <el-button
        v-if="active >= 1 && paperShow != 'editor' && btnShow"
        type="primary"
        @click="active--"
        >上一步</el-button
      >
      <el-button
        v-if="active >= 1 && active < 4 && paperShow != 'editor' && btnShow"
        type="primary"
        @click="next()"
        >下一步</el-button
      >
      <el-button
        v-if="active >= 4 && paperShow != 'editor' && btnShow"
        type="primary"
        @click="publish()"
        >发布</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import PaperSelect from "./PaperSelect.vue";
import Paper from "./Paper.vue";
import PaperRule from "./PaperRule.vue";
import ExamSetting from "./ExamSetting.vue";
import ExamUser from "./ExamUser.vue";
import ExamPublish from "./ExamPublish.vue";
import { useExamStore, type ExamQuestion, type ExamRule } from "@/stores/exam";
import { ElMessage } from "element-plus";
import http from "@/request";
import dayjs from "dayjs";
import { useRouter, useRoute } from "vue-router";

// 定义变量
const route = useRoute();
const router = useRouter();
const active = ref(0); // 当前激活步骤
const paperShow = ref("paper"); // 试卷显示
const form = useExamStore(); // 考试储存
const paper = ref(); // 试卷配置组件
const paperRule = ref(); // // 试卷配置组件
const examSetting = ref(); // 考试配置组件
const examUser = ref(); // 考试用户组件
const btnShow = ref(true); // 按钮显示
const progressBar = reactive({
  // 进度条
  percent: 0, // 进度
  code: 200, // 响应码
  msg: "", // 响应消息
});

// 组件挂载完成后，执行如下方法
onMounted(async () => {
  // 如果是添加，初始化数据
  if (route.path.indexOf("/exam/add") >= 0) {
    form.id = null;
    form.name = `考试-${dayjs().add(0, "day").format("YYYY-MM-DD")}`;
    form.paperName = `试卷-${dayjs().add(0, "day").format("YYYY-MM-DD")}`;
    form.examTimes = [
      dayjs()
        .add(0, "day")
        .hour(8)
        .minute(0)
        .second(0)
        .format("YYYY-MM-DD HH:mm:ss"),
      dayjs()
        .add(0, "day")
        .hour(10)
        .minute(0)
        .second(0)
        .format("YYYY-MM-DD HH:mm:ss"),
    ];
    form.markTimes = [
      dayjs()
        .add(0, "day")
        .hour(14)
        .minute(0)
        .second(0)
        .format("YYYY-MM-DD HH:mm:ss"),
      dayjs()
        .add(0, "day")
        .hour(18)
        .minute(0)
        .second(0)
        .format("YYYY-MM-DD HH:mm:ss"),
    ];
    form.genType = 1;
    form.passScore = 0;
    form.sxes = [] as number[];
    form.showType = 1;
    form.anonState = 2;
    form.scoreState = 2;
    form.rankState = 2;
    form.state = 1;
    form.examQuestions = [] as ExamQuestion[];
    form.examRules = [] as ExamRule[];
    form.examUserIds = [] as number[];
    form.markUserIds = [] as number[];
  }
  // 如果是修改，回显数据
  else if (route.path.indexOf("/exam/edit/") >= 0 && route.params.id) {
    let {
      data: { data },
    } = await http.post("exam/paper", { id: route.params.id });
    form.id = data.id;
    form.name = data.name;
    form.paperName = data.paperName;
    form.examTimes[0] = data.startTime;
    form.examTimes[1] = data.endTime;
    if (data.markType === 2) {
      form.markTimes[0] = data.markStartTime;
      form.markTimes[1] = data.markEndTime;
    }
    form.genType = data.genType;
    form.passScore = data.passScore;
    form.sxes = data.sxes;
    form.showType = data.showType;
    form.anonState = data.anonState;
    form.scoreState = data.scoreState;
    form.rankState = data.rankState;
    form.state = data.state;
    form.examQuestions = data.examQuestions;
    form.examRules = data.examRules;
    form.examUserIds = data.examUserIds;
    form.markUserIds = data.markUserIds;
    form.noUpdate();

    if (form.genType === 1) {
      // 根据组卷类型自动跳到下一步
      paperSelect("blank");
    } else {
      paperSelect("random");
    }
  }
});

// 试卷选择方式
function paperSelect(type: string) {
  // 选择空白试卷，组固定试卷，显示空白试卷
  if (type === "blank") {
    form.genType = 1;
    paperShow.value = "paper";
    next();
  }
  // 选择文本导入，组固定试卷，显示试题编辑器
  else if (type === "quick") {
    form.genType = 1;
    paperShow.value = "editor";
    next();
  }
  // 选择随机试卷，组随机试卷，显示抽题规则页面
  else if (type === "random") {
    form.genType = 2;
    next();
  }
}

// 下一步
async function next() {
  if (active.value === 0) {
    // 试卷选择
    active.value++;
    return;
  }

  if (active.value === 1) {
    // 试卷配置
    let component = form.genType === 1 ? paper : paperRule;
    if (await component.value.next()) {
      if (form.subjectiveQuestionNum + form.objectiveQuestionNum === 0) {
        ElMessage.error(
          `最少添加一${form.genType === 1 ? "道试题" : "条规则"}`
        );
        return;
      }

      active.value++;
    }
    return;
  }

  if (active.value === 2) {
    // 考试配置
    let component = examSetting;
    if (await component.value.next()) {
      active.value++;
    }
    return;
  }

  if (active.value === 3) {
    // 用户选择
    let component = examUser;
    if (await component.value.next()) {
      active.value++;
    }
  }
}

// 发布考试
async function publish() {
  // 隐藏发布等按钮
  btnShow.value = false;

  console.log(form.examUserIds);
  console.log(form.markUserIds);
  // 发布考试
  let {
    data: { code, data: processBarId },
  } = await http.post(
    "exam/publish",
    JSON.stringify({
      id: form.id,
      name: form.name,
      paperName: form.paperName,
      genType: form.genType,
      passScore: form.passScore,
      sxes: form.sxes,
      showType: form.showType,
      anonState: form.anonState,
      scoreState: form.scoreState,
      rankState: form.rankState,
      state: form.state,
      examQuestions: form.examQuestions,
      examRules: form.examRules,
      examUserIds: form.examUserIds,
      markUserIds: form.markUserIds,
      totalScore: form.totalScore,
      markType: form.markType,
      startTime: form.examTimes[0],
      endTime: form.examTimes[1],
      markStartTime: form.markType === 2 ? form?.markTimes[0] : "",
      markEndTime: form.markType === 2 ? form?.markTimes[1] : "",
    }),
    { headers: { "Content-Type": "application/json" } }
  );

  if (code !== 200) {
    // 如果有异常，显示按钮重新操作
    btnShow.value = true;
    return;
  }

  // 显示进度
  let timer = setInterval(async function () {
    let {
      data: { code, msg, data },
    } = await http.post("progressBar/get", { id: processBarId });
    progressBar.code = code;
    progressBar.msg = msg;
    progressBar.percent = data.percent;

    if (code !== 200) {
      // 如果报错，停止进度条，显示按钮
      clearInterval(timer);
      btnShow.value = true;
      return;
    }

    if (progressBar.percent < 100) {
      // 如果进度不足100%，间隔1秒在查询进度
      return;
    }

    // 完成后跳转道考试列表页面
    clearInterval(timer);
    router.push("/exam");
  }, 1000);
}
</script>

<style lang="scss" scoped>
.edit {
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
  position: relative;

  .edit-top {
    background-color: white;
  }

  .edit-bottom {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 99;
    .edit-bottom-percent {
      display: inline-block;
      margin: 0px 30px 30px 0px;
      width: 400px;
    }
  }
}
</style>
